<template>
  <div class="list">
    <v-navbar/>
    <vue-waterfall-easy ref="waterfall" :imgsArr="imgsArr" @scrollReachBottom="_initImgArr"
                        :isRouterLink="isRouterLink">
      <template slot-scope="props">
        <div class="player_info">
          <div class="name">{{props.value.infos[0].goodsName}}</div>
          <div class="price now">
            <span class="num">￥{{props.value.infos[0].platformRetailPrice}}</span>
            <span class="text old">市场价￥{{props.value.infos[0].marketRetailPrice}}</span>
          </div>
        </div>
        <div class="end-times">
          <span class="text">描述:</span>
          <div class="time-down">
            <span>{{props.value.infos[0].remark}}</span>
          </div>
        </div>
        <div class="collection"></div>
      </template>
      <div slot="waterfall-over">已全部加载</div>
    </vue-waterfall-easy>
  </div>
</template>

<script>
  import navbar from '@c/navbar/navbar'
  import vueWaterfallEasy from 'vue-waterfall-easy'
  import searchBtn from '@c/searchBtn/searchBtn'
  import CountDown from '@c/countDown/countDown'
  import { formatDate } from '@js/formatDate.js'
  import { mapState, mapMutations } from 'vuex'
  import { vpost, sonpost, fpost, gpost, vlink } from '@api/axios'
  import { tokenPost, jtpost, gtpost, tokenLink, jtget } from '@api/axiosByToken'

  export default {
    name: 'collection',
    data() {
      return {
        imgsArr: [],
        group: 0,
        isRouterLink: true,
        page: 0,
      }
    },

    components: {
      'v-navbar': navbar,
      vueWaterfallEasy,
      CountDown,
    },
    computed: {
      ...mapState(['wtitle', 'rback', 'auctionIndex']),
    },

    methods: {
      ...mapMutations(['WTITLE', 'RBACK', 'AUCTIONINDEX']),
      // 下拉加载数据|获得用户收藏数据
      _initImgArr() {
        this.page++
        let collectionData = {
          userId: window.localStorage.userId,
          page: this.page,
          count: 10,
        }
        tokenPost(tokenLink.collection, collectionData).then(re => {
          if (re.status === 0) {
            if (re.data.length === 0) {
              console.log(22)
              this.$refs.waterfall.waterfallOver()
              return
            }
            re.data.forEach(item => {
              item['href'] = '/dealDetail?id=' + item.href
            })
            console.log(re.data)
            this.imgsArr = this.imgsArr.concat(re.data)
          } else {
            this.$Message.warning(re.msg)
          }
        })
      },
    },

    mounted() {
      this._initImgArr()
      this.WTITLE('我的收藏')
      this.RBACK(true)
    },
    watch: {
      'imgsArr'() {
        return this.imgsArr
      },
    },
  }
</script>
